/** @format */
import { MessageOutlined, SearchOutlined } from "@ant-design/icons";
import React, { memo, useEffect, useState } from "react";
import styles from "./index.module.less";
import { useLocation, useNavigate } from "react-router-dom";
import { Button, Flex, Menu, MenuProps } from "antd";
import { RouterPath } from "../../router";
import imgLogo from "../../assets/img/logo.png";
import { Image } from "antd";

type MenuItem = Required<MenuProps>["items"][number];

const BothHead = () => {
  const [menCurrent, setMenCurrent] = useState("首页");
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    // 根据当前路径设置当前选中的菜单项 `menCurrent`
    setMenCurrent(location.pathname);
  }, [location.pathname]);

  // 定义 onMenuClick 处理菜单点击事件，类型为 MenuProps["onClick"]
  const onMenuClick: MenuProps["onClick"] = (e) => {
    if (
      ["1", "2", "3", "4", "5", "6"].includes(e.key) ||
      e.key === menCurrent
    ) {
      return;
    }
    // 更新当前选中的菜单项 `menCurrent`，e.key 是被点击的菜单项的 key
    setMenCurrent(e.key);
    // `e.key` 作为跳转的路径，`replace: true` 表示替换当前历史记录（不会产生新的历史记录）
    navigate(e.key, { replace: true });
  };

  const gotoLogin = () => {
    navigate(RouterPath.login); // 跳转到登录页面
  };

  const gotoRegister = () => {
    navigate(RouterPath.register); // 跳转到注册页面
  };

  return (
    // 整个框架
    <Flex className={styles.layout}>
      <Flex className={styles.title_first}>
        {/* 网站logo */}
        <Image
          className={styles.title_img}
          width={68}
          src={imgLogo}
          preview={false}
        />
        {/* 导航菜单 */}
        <Menu
          className={styles.menu}
          onClick={onMenuClick}
          selectedKeys={[menCurrent]}
          mode="horizontal"
          items={items}
        />
      </Flex>
      {/* 登陆注册 */}
      <Flex className={styles.login_div}>
        <div className={styles.button} onClick={gotoLogin}>
          登录
        </div>
        <div className={styles.button}>·</div>
        <div className={styles.button} onClick={gotoRegister}>
          注册
        </div>
        <MessageOutlined className={styles.message_icon} />
      </Flex>
    </Flex>
  );
};

export default memo(BothHead);

const items: MenuItem[] = [
  {
    label: "首页",
    key: RouterPath.head,
  },
  {
    label: "鸿蒙开发",
    key: "鸿蒙开发",
    disabled: true, // 禁用该菜单项
  },
  {
    label: "学习路线",
    key: RouterPath.learningPath,
  },
  {
    label: "广场",
    key: RouterPath.square,
  },
  {
    label: "导航",
    key: "导航",
    disabled: true,
  },
  {
    label: "教程",
    key: "教程",
    disabled: true,
  },
  {
    label: "问答",
    key: "问答",
    disabled: true,
  },
  {
    label: "公众号",
    key: "公众号",
    disabled: true,
  },
  {
    label: "工具",
    key: "工具",
    disabled: true,
  },
];

const NameList = memo(() => {
  const [data, setData] = useState(["111", "222", "333"]);
  const click = (item: string) => {
    console.log("item", item);
  };
  return (
    <Flex className={styles.nameList}>
      {data.map((item: string) => (
        <div onClick={() => click(item)}>{item}</div>
      ))}
    </Flex>
  );
});
